<template>
    <div>
        <div class="ls-card">
            <el-alert
                title="温馨提示：1.用户申请审核通过即可成为分销会员；审核拒绝后可再次发起申请。"
                type="info"
                show-icon
                :closable="false"
            />

            <div class="m-t-16">
                <el-form ref="queryObj" inline :model="queryObj" label-width="100px" size="small">
                    <el-form-item label="用户信息">
                        <el-input
                            style="width: 280px"
                            v-model="queryObj.user_info"
                            placeholder="请输入用户昵称/用户编号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="申请时间">
                        <date-picker :start-time.sync="queryObj.start_time" :end-time.sync="queryObj.end_time" />
                    </el-form-item>
                    <el-form-item label="" class="m-l-6">
                        <el-button size="small" type="primary" @click="getList(1)">查询</el-button>
                        <el-button size="small" @click="resetQueryObj">重置</el-button>

                        <export-data
                            class="m-l-10"
                            :pageSize="pager.size"
                            :method="apiDistributionApplyLists"
                            :param="queryObj"
                        ></export-data>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="ls-card m-t-16">
            <el-tabs v-model="activeName" v-loading="pager.loading" @tab-click="getList()">
                <el-tab-pane
                    v-for="(item, index) in tabs"
                    :key="index"
                    :label="`${item.label}(${tabCount[item.name]})`"
                    :name="item.name"
                >
                    <el-table ref="paneTable" :data="pager.lists" style="width: 100%" size="mini">
                        <el-table-column prop="name" label="用户昵称" min-width="180">
                            <template slot-scope="scope">
                                <div class="flex pointer" @click="toUser(scope.row.user_id)">
                                    <el-image
                                        class="flex-none"
                                        style="width: 58px; height: 58px"
                                        :src="scope.row.avatar"
                                    />
                                    <div class="goods-info m-l-8">
                                        <div class="line-2">{{ scope.row.nickname }}({{ scope.row.sn }})</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="real_name" label="真实姓名" min-width="140"></el-table-column>
                        <el-table-column prop="phone" label="联系手机" min-width="140"></el-table-column>
                        <el-table-column prop="level_name" label="分销身份" min-width="140"></el-table-column>
                        <el-table-column prop="address" label="所属区域" min-width="140"></el-table-column>
                        <el-table-column prop="remark" label="申请原因" min-width="140"></el-table-column>
                        <el-table-column prop="status_text" label="申请状态" min-width="140"></el-table-column>
                        <el-table-column prop="reject_reason" label="审核拒绝说明" min-width="140"></el-table-column>
                        <el-table-column prop="update_time" label="申请时间" min-width="140"></el-table-column>
                        <el-table-column fixed="right" label="操作" min-width="150">
                            <template slot-scope="scope">
                                <el-button
                                    slot="trigger"
                                    class="m-r-10"
                                    type="text"
                                    size="small"
                                    @click="
                                        $router.push({
                                            path: '/distribution/distribution_apply_details',
                                            query: { id: scope.row.id }
                                        })
                                    "
                                    >详情</el-button
                                >
                                <el-popconfirm
                                    title="确认拒绝吗？"
                                    @confirm="confirmOp(scope.row.id)"
                                    class="m-l-10"
                                    v-show="scope.row.status == 1"
                                >
                                    <el-button slot="reference" type="text" size="small">拒绝</el-button>
                                </el-popconfirm>
                                <span class="m-l-10" v-show="scope.row.status == 1">
                                    <el-button
                                        slot="trigger"
                                        class="m-r-10"
                                        type="text"
                                        size="small"
                                        @click="endorse(scope.row.id)"
                                        >通过</el-button
                                    >
                                </span>

                                <el-dialog
                                    title="请输入拒绝原因"
                                    :visible.sync="dialogVisible"
                                    width="30%"
                                    :before-close="beforeDel"
                                    :modal="false"
                                >
                                    <el-input
                                        type="textarea"
                                        placeholder="请输入内容"
                                        v-model="textarea"
                                        maxlength="255"
                                        show-word-limit
                                    >
                                    </el-input>

                                    <span slot="footer" class="dialog-footer">
                                        <el-button @click="quxiao">取 消</el-button>
                                        <el-button type="primary" @click="confirmIs(scope.row.id)">确 定</el-button>
                                    </span>
                                </el-dialog>

                                <!-- <ls-dialog
                                    v-if="scope.row.status_desc == '待审核'"
                                    class="inline m-l-24"
                                    @confirm="confirm(scope.row.id)"
                                >
                                    <el-button slot="trigger" type="text" size="small">审核</el-button>

                                    <el-form :inline="true" label-width="80px" :model="examine">
                                        <el-form-item label="状态">
                                            <el-radio-group v-model="examine.flag">
                                                <el-radio :label="1">通过</el-radio>
                                                <el-radio :label="2">拒绝</el-radio>
                                            </el-radio-group>
                                        </el-form-item>

                                        <el-form-item label="名称">
                                            <el-input
                                                type="textarea"
                                                placeholder="请输入内容"
                                                v-model="examine.audit_remark"
                                                maxlength="30"
                                                show-word-limit
                                            />
                                        </el-form-item>
                                    </el-form>
                                </ls-dialog> -->
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="m-t-24 flex row-right">
                        <ls-pagination v-model="pager" @change="getList()"></ls-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script lang="ts">
// 审核以及详情未完成

import { Component, Vue, Watch } from 'vue-property-decorator'
import { RequestPaging } from '@/utils/util'
import { disType } from '@/utils/type'
import lsDialog from '@/components/ls-dialog.vue'
import lsPagination from '@/components/ls-pagination.vue'
import DatePicker from '@/components/date-picker.vue'
import ExportData from '@/components/export-data/index.vue'
import {
    apiDistributionApplyLists,
    apiDistributionApplyRefuse,
    apiDistributionApplyPass,
    apiDistributionApplyEndorse,
    apiDistributionApplycpefuse
} from '@/api/distribution/distribution'

@Component({
    components: {
        lsDialog,
        lsPagination,
        DatePicker,
        ExportData
    }
})
export default class DistributionApply extends Vue {
    apiDistributionApplyLists = apiDistributionApplyLists

    tabs = [
        {
            label: '全部',
            name: disType[0]
        },
        {
            label: '待审核',
            name: disType[1]
        },
        {
            label: '审核通过',
            name: disType[2]
        },
        {
            label: '审核拒绝',
            name: disType[3]
        }
    ]

    queryObj = {
        user_info: '',
        end_time: '',
        start_time: ''
    }

    examine = {
        flag: 1,
        audit_remark: ''
    }

    lists = []

    textarea = ''

    dialogVisible = false

    tabCount = {
        all: 0, //全部
        wait: 1, //待审核
        pass: 2, //审核通过
        refuse: 3 //已拒绝
    }
    ids = null

    pager = new RequestPaging()
    activeName: any = 'all'

    // confirm(id: number) {
    //     if (this.examine.flag == 1) {
    //         apiDistributionApplyPass({
    //             id,
    //             audit_remark: this.examine.audit_remark
    //         }).then(() => {
    //             this.getList()
    //         })
    //     } else {
    //         apiDistributionApplyRefuse({
    //             id,
    //             audit_remark: this.examine.audit_remark
    //         }).then(() => {
    //             this.getList()
    //         })
    //     }
    // }

    // 获取申请的列表
    getList(page?: number): void {
        page && (this.pager.page = page)
        let status: any = disType[this.activeName] == '0' ? '' : (disType[this.activeName] as any)
        if (status == 3) {
            status = 4
        }
        this.pager
            .request({
                callback: apiDistributionApplyLists,
                params: {
                    status: status,
                    ...this.queryObj
                }
            })
            .then(res => {
                this.tabCount = res?.extend
            })
    }

    // 重置
    resetQueryObj() {
        Object.keys(this.queryObj).map(key => {
            this.$set(this.queryObj, key, '')
        })
        this.getList()
    }
    // 弹窗关闭
    beforeDel() {
        this.dialogVisible = false
        this.textarea = ''
    }
    // 拒绝确认按钮
    confirmOp(id: any) {
        console.log(id, '===========')
        this.ids = id
        this.dialogVisible = true
    }

    endorse(id: any) {
        this.$confirm('是否通过审核？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
        })
            .then(() => {
                apiDistributionApplyEndorse({
                    id
                }).then(res => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '通过审核成功!'
                    // })
                    this.getList()
                })
            })
            .catch(() => {
                //   this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                //   });
            })
    }

    // 确认按钮
    confirmIs() {
        if (this.textarea == '') {
            this.$message.success('拒绝内容不能为空')
            return
        }
        apiDistributionApplycpefuse({
            id: this.ids,
            reject_reason: this.textarea
        }).then(res => {
            console.log(res)
            this.beforeDel()
            this.getList()
        })
    }
    // 点击弹窗的取消按钮
    quxiao() {
        this.dialogVisible = false
        this.textarea = ''
    }

    // 去用户详情
    toUser(id: any) {
        this.$router.push({
            path: '/user/user_details',
            query: { id: id }
        })
    }

    created() {
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.pointer:hover {
    color: $--color-primary;
}
</style>
